<!-- 头部 -->
<template>
    <view class="header">
        <view class="bg-white">
            <view class="flex align-center justify-between">
                <view class='margin-xs padding-xs'>
                    <img class="logo" src="http://zhimajob.com/cdn/img/logo.png" alt="芝麻兼职">
                </view>
                <view class='flex padding-xs margin-xs'>
                    <span>当前城市:</span>
                    <text class='icon-locationfill text-orange'></text>
                    <picker class="city-picker-wrap" @change="pickerChange" :value="cityIndex" :range="cityList" range-key="cityName">
                        <view class="city-picker-content">
                            {{ cityList.length !==0 ? cityList[cityIndex].cityName : '请选择' }}
                            <text class='icon-unfold'></text>
                        </view>
                    </picker>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {
    getCityList
} from '../model/result.model';
import store from '@/store';

export default {
    data() {
        return {
            currentCity: {},
            cityIndex: 0
        };
    },
    computed: {
        cityList() { // 获取招聘职位列表信息
            return this.$store.state.cityList || [];
        },
    },
    created() {
        getCityList().then(()=>{
            store.commit('setCurrentCity', this.$store.state.cityList[0]);
        });

    },
    watch: {
        '$store.state.cityList': {
            handler() {
                this.currentCity = this.$store.state.cityList[0];
            },
            deep: true,
        },
        currentCity() {
            store.commit('setCurrentCity', this.currentCity);
        },
    },
    methods: {
        pickerChange(e) {
            this.cityIndex = (+e.target.value);
            this.currentCity = this.cityList[this.cityIndex]
        }
    },
};

</script>
<style lang='less' scoped>
.header {
    .logo {
        width: 190rpx;
        height: 60rpx !important;
    }
    .city-picker-content {
        color: #2196f3;
    }
}
</style>
